<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue.js"></script>
</head>
<body>
<div id="app">
    <label for="">
        <input type="radio" name="sex" v-model="sex" value="男">男
    </label>
    <label for="">
        <input type="radio" name="sex" v-model="sex" value="女">女
    </label>
    <h1>{{sex}}</h1>
    <hr>
    <input type="text" v-model="message">
    <h1>{{message}}</h1>
    <hr>
    <label for="">
        <input type="checkbox" v-model="isAgree">同意协议
    </label>
    <button :disabled="!isAgree">下一步</button>
    <h1>{{isAgree}}</h1>
    <hr>
    <label for=""><input type="checkbox" value="篮球" v-model="hobel">篮球</label>
    <label for=""><input type="checkbox" value="足球" v-model="hobel">足球</label>
    <label for=""><input type="checkbox" value="羽毛球" v-model="hobel">羽毛球</label>
    <label for=""><input type="checkbox" value="乒乓球" v-model="hobel">乒乓球</label>
    <h1>{{hobel}}</h1>
    <hr>
    <select name="" id="" v-model="hobels">
        <option value="篮球">篮球</option>
        <option value="足球">足球</option>
        <option value="羽毛球">羽毛球</option>
        <option value="乒乓球">乒乓球</option>
    </select>
    <h1>{{hobels}}</h1>
    <hr>
    <select name=""  v-model="hobelss" multiple>
        <option value=篮球>篮球</option>
        <option value="足球">足球</option>
        <option value="羽毛球">羽毛球</option>
        <option value="乒乓球">乒乓球</option>
    </select>
    <h1>{{hobelss}}</h1>
    <hr>
    <label  v-for="item in hobeles">
        <input type="checkbox" :value="item" v-model="hobelss">{{item}}
    </label>
</div>
<script>
    let app = new Vue({
        el:'#app',
        data:{
            message:'Hello World',
            sex:'男',
            isAgree:false,
            hobel:[],
            hobels:'篮球',
            hobelss:[],
            hobeles:['篮球','足球','羽毛球','乒乓球','橄榄球']
        },
        methods:{

        }
    })
</script>
</body>
</html>
